<template>
  <div class="address-bg">
    <div class="address"></div>
    <!-- 
 -->
    <van-address-edit
      :address-info="addressInfo"
      show-set-default
      show-search-result
      show-delete
      :show-area="false"
      :search-result="searchResult"
      @save="onSave"
      @delete="onDelete"
    />
  </div>
</template>

<script>
import { areaList } from "@vant/area-data";
export default {
  name: "AddressEdit",
  data() {
    return {
      id: 0,
      areaList,
      searchResult: [],
      addressInfo: {},
    };
  },
  created() {
    this.init();
  },
  props: ["info"],
  methods: {
    onSave(data) {
      let form = {
        id: this.addressInfo.id,
        name: data.name,
        tel: data.tel,
        area: "北京市-北京市-东城区",
        isDefault: data.isDefault,
        detail: data.addressDetail,
      };
      this.$http
        .post("http://localhost:8080/address/updata", form, {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
        })
        .then((result) => {
          if (result.code == 0) {
            this.$router.push({ name: "address" });
          }
        });
    },
    onDelete() {
      this.$http
        .post("http://localhost:8080/address/delete", {id:this.addressInfo.id}, {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
        })
        .then((res) => {
          this.$toast.success("删除成功");
          this.$router.go(-1);
        });
    },
    init() {
      this.addressInfo = {
        id: this.info.id,
        name: this.info.name,
        tel: this.info.tel,
        addressDetail: this.info.address,
        isDefault: this.info.isDefault,
      };
    },
  },
};
</script>

<style scoped>
.address-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgb(247, 248, 250);
}
.address {
  margin-top: 150px;
}
</style>